<script type="text/javascript" src="/files/editors/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/files/editors/tiny_mce/editor_admin.js"></script>
<script type="text/javascript" src="/files/js/relCopy.jquery.js"></script>
<!--<script type="text/javascript" src="/files/bootstrap-master/js/bootstrap-datetimepicker.min.js"></script>
<link type="text/css" rel="stylesheet" href="/files/bootstrap-master/css/bootstrap-datetimepicker.min.css" />-->
<link rel="stylesheet" media="all" type="text/css" href="/files/js/jquery.timepicker/jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="/files/js/jquery.timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="/files/js/jquery.timepicker/localization/jquery-ui-timepicker-vi.js"></script>
<script type="text/javascript" src="/files/js/jquery.timepicker/jquery-ui-sliderAccess.js"></script>
<style>
    .checkbocklist {
        width:100px;
        float:left;
        overflow:hidden;
    }
    .checkbocklist label{
        width: 50px;
    }
    #Movie_type input[type=radio]{
        float: left;   
        margin: 7px 5px 0 0;
    }
    #Movie_type label{
        float: left;    
    }
    #handbook-form {
        padding-left: 20px;
    }
    label.required {
        float:left;
    }
    .ui-datepicker {
        width: 232px;
    }

</style>
<div class="grid_4">       
    <div class="da-panel">
        <div class="da-panel-header">
            <span class="da-panel-title">
                Event
            </span>
        </div>

        <div id="da-ex-tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
            <?php // $this->renderPartial('_tabs', array('model' => $model))?>
            <div style="padding-bottom: 20px;">

                <?php $this->widget('admin.components.widgets.AlertWidget');?>

                <?php $form=$this->beginWidget('CActiveForm', array(
                        'id'=>'event-form',
                        'enableClientValidation'=>true,
                        'clientOptions'=>array(
                            'validateOnSubmit'=>true,
                        ),
                        //'enableAjaxValidation'=>true,
                        'htmlOptions' => array('class' => 'stdform', 'enctype' => 'multipart/form-data')
                    )); ?>
                <h4 class="widgettitle">Chọn cửa hàng</h4>
                <div class="par control-group">
                    <?php echo $form->errorSummary($model);?>
                </div>
                <div class="par control-group">
                    <?php echo $form->labelEx($model,'city_id', array('class' => 'control-label')); ?>
                    <div class="controls">
                        <?php echo $form->dropDownList($model,'city_id', $citiesData, array('class' => 'input')); ?>
                        <?php echo $form->error($model,'city_id');?>
                    </div>
                </div>

                <div class="par control-group">
                    <?php echo $form->labelEx($model,'district_id', array('class' => 'control-label')); ?>
                    <div class="controls">
                        <?php echo $form->dropDownList($model,'district_id', $districtsData, array('class' => '')); ?>
                        <?php echo $form->error($model,'district_id');?>
                    </div>
                </div>   
                <script>

                    $(function(){

                        $.post('<?php echo $this->createUrl('/admin/event/getShopDataJson')?>', {district_id : $("#Event_district_id").val()}, function(shops){
                            suggest(shops);    
                        });
                    });


                    $("#Event_district_id").change(function(){
                        var district_id = $(this).val();

                        $.post('<?php echo $this->createUrl('/admin/event/getShopDataJson')?>', {district_id : district_id}, function(shops){
                            suggest(shops);    
                        });
                    });


                    function suggest(shops) {
                        var shops = $.parseJSON(shops);

                        $("#Event_shop_name").autocomplete({
                            delay: 100,
                            minLength: 0,
                            source: function(request, response) {
                                var key = $.ui.autocomplete.escapeRegex($.trim(request.term));
                                var matcher = new RegExp(key, "i" );
                                var datas2 = new Array();
                                var i = 0;
                                $.each(shops, function(index, data){ 
                                    if ((matcher.test(data) || matcher.test(data.toAlias())) && i < 10){
                                        console.log(index);
                                        datas2[i] = {
                                            label:data, 
                                            labelhl:data.highlight(key),
                                            index:index
                                        };
                                        i++;      
                                    } 
                                });
                                response(datas2);
                            }, 
                            messages: {
                                noResults: '',
                                results: function() {}
                            },
                            //                            focus: function( event, ui ) {
                            //                                $(this).val( ui.item.label );
                            //                                return false;
                            //                            },
                            select: function( event, ui ) {
                                $("#Event_shop_name").val(ui.item.value);
                                $("#Event_shop_id").val(ui.item.index);

                                $.post('<?php echo $this->createUrl('/admin/event/getBranchByShopDataJson')?>', {shop_id : ui.item.index}, function(result){
                                    if(result != ''){
                                        var result = $.parseJSON(result);
                                        var html = ''
                                        $.each(result,function(index, data){
                                            html += "<option value='"+index+"'>"+data+"</option>";
                                        });
                                        $('#chose-branch').html(html);
                                    }  
                                });

                                return false;
                            },
                            search: function(event, ui) { 

                            }
                        })
                        .data( "autocomplete" )._renderItem = function(ul, item) {
                            return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a style='cursor: pointer'>" + item.labelhl + "</a>")
                            .appendTo( ul );
                        };
                    }
                </script>


                <div class="par control-group">
                    <?php echo $form->labelEx($model,'shop_name', array('class' => 'control-label ')); ?>
                    <div class="controls">
                        <?php echo $form->textField($model,'shop_name',array("value" => $shop_name )); ?>
                        <?php echo $form->error($model,'shop_name');?>
                    </div>
                </div>    
                <div class="par control-group" style="display:none;">
                    <?php echo $form->labelEx($model,'shop_id', array('class' => 'control-label ')); ?>
                    <div class="controls">
                        <?php echo $form->textField($model,'shop_id'); ?>
                        <?php echo $form->error($model,'shop_id');?>
                    </div>
                </div>    

                <p>
                    <label>Chọn chi nhánh</label>
                    <span class="dualselect" id="dualselect">
                        <select size="10" id="chose-branch" multiple="multiple" name="select3" class="uniformselect">
                        </select>
                        <span class="ds_arrow">
                            <button class="btn ds_prev"><i class="icon-chevron-left"></i></button><br>
                            <button class="btn ds_next"><i class="icon-chevron-right"></i></button>
                        </span>
                        <?php echo $form->dropDownList($model, 'branches', $branches, array('maxlength'=>255, 'class' => 'input', 'multiple' => 'multiple', 'size' => '10')); ?>
                    </span>
                </p>
                <h4 class="widgettitle">Nội dung event</h4>
                <div class="par control-group">
                    <?php echo $form->labelEx($model,'title', array('class' => 'control-label')); ?>
                    <div class="controls">
                        <?php echo $form->textField($model,'title',array('maxlength'=>64, 'class' => 'input-large')); ?>
                        <?php echo $form->error($model,'title', array('class' => 'help-inline error'));?>
                    </div>
                    <small class="desc">Title should be 50-64 chars <span id="title_char_count"></span></small>
                </div>
                <div class="par control-group">
                    <label class="control-label required">Thời gian <span class="required">*</span> </label>
                    <div class="controls">
                        <?php echo $form->radioButton($model,'check_frequency',($model->start) ? array('value'=>'once','checked' => true) : array('value'=>'once','checked' => FALSE)); ?>

                        <span style="float:left;line-height: 32px;">Từ ngày</span>
                        <div id="datetimepicker1" class="input-append date">
                            <?php echo $form->textField($model,'start',array('maxlength'=>64, 'class' => 'input-large', 'data-format'=>'yyyy-MM-dd hh:mm:ss')); ?>
                        </div>
                        <span style="float:left;line-height: 32px;">đến&nbsp;&nbsp;</span>
                        <div id="datetimepicker2" class="input-append date">
                            <?php echo $form->textField($model,'end',array('maxlength'=>64, 'class' => 'input-large', 'data-format'=>'yyyy-MM-dd hh:mm:ss')); ?>
                        </div>    
                        <div class="clear" style="clear:both"></div>
                    </div>
                    <span class="formwrapper"><?php echo $form->radioButton($model,'check_frequency', ($model->start) ? array('value'=>'many','checked'=> false) : array('value'=>'many','checked'=> TRUE)); ?><span style="float:left;line-height: 32px;">Các ngày trong tuần</span>
                        <div class="clear" style="clear:both"></div>
                        <span class="formwrapper" id="list_frequencies">
                            <?php echo $form->CheckBoxList($model,'frequency_id', Event::model()->getFrequencyData(),array('separator'=>'','template'=>'<div class="checkbocklist">{input}&nbsp;{label}</div>')); ?>
                        </span>
                    </span>
                    <div class="clear" style="clear:both;padding-top: 10px;"></div>
                    <span class="formwrapper time-choice" style="display:none;padding-left: 20px;">
                        <span style="float:left;line-height: 32px;">Lúc</span>
                        <div id="datetimepicker3" class="input-append date">
                            <?php echo $form->textField($model,'start_time',array('maxlength'=>40, 'class' => 'input-large', 'data-format'=>'hh:mm:ss')); ?>
                        </div>
                        <span style="float:left;line-height: 32px;">đến&nbsp;&nbsp;</span>
                        <div id="datetimepicker4" class="input-append date">
                            <?php echo $form->textField($model,'end_time',array('maxlength'=>40, 'class' => 'input-large', 'data-format'=>'hh:mm:ss')); ?>
                        </div>
                    </span>
                </div>
                <div class="par control-group">
                    <?php echo $form->labelEx($model,'status', array('class' => 'control-label')); ?>
                    <div class="controls">
                        <?php echo $form->dropDownList($model,'status', Event::model()->getStatusData()); ?>
                        <?php echo $form->error($model,'status', array('class' => 'help-inline error'));?>
                    </div>
                </div>
                <div class="par control-group">
                    <?php echo $form->labelEx($model,'cats', array('class' => 'control-label')); ?>
                    <div class="controls">
                        <?php echo $form->dropDownList($model,'cats',  PostCat::model()->getData(), array('maxlength'=>255, 'class' => 'input', 'multiple' => 'multiple', 'size' => '10')); ?>
                        <?php echo $form->error($model,'cats', array('class' => 'help-inline error'));?>
                    </div>
                </div>
                <style>
                    #list_frequencies {
                        margin:0;
                        padding:0;
                        display: none;
                    }
                    #Event_check_frequency {
                        float: left; 
                        margin-top: 12px;
                    }
                    #datetimepicker1, #datetimepicker3{
                        float: left; 
                        margin-left: 12px;
                        margin-right: 10px;
                    }
                    .bootstrap-datetimepicker-widget .timepicker .separator {
                        border: none;
                        vertical-align: middle;
                    }
                    .bootstrap-datetimepicker-widget ul {
                        list-style: none;
                    }
                    .upload_method{
                        cursor: pointer;
                    }
                    .upload_method.selected{
                        text-decoration: underline;
                        font-weight: bold;
                    }
                    #img_file {
                        margin-top: 5px;
                    }
                    #image_file, #image_url, #img_file, #img_url{
                        margin-left: 220px;
                    }
                    #image_file, #image_url{
                        display: none;
                    }
                </style>
                <script>
                    $(function(){
                        $('#Event_start').datetimepicker({
                        });
                        $('#Event_end').datetimepicker();

                        $("input[name='Event[check_frequency]']").change(function(){
                            $("span.time-choice").hide();
                            $("#list_frequencies").hide();
                        });
                        $("input[name='Event[check_frequency]']:last").change(function(){
                            $("span.time-choice").show();
                            $("#list_frequencies").show();
                        });
                        if($("input[name='Event[check_frequency]']:last").is(':checked') ){
                            $("span.time-choice").show();
                            $("#list_frequencies").show();
                        };
                        $("#a_url").click(function(){
                            $('#a_file').removeClass('selected');    
                            $('#a_url').addClass('selected');    
                            $('#image_url').show();    
                            $('#image_file').hide();
                            $("#img_url").show();
                            $('#img_file').hide();
                            $('#Event_upload_method').val('url');    
                        });
                        $("#a_file").click(function(){
                            $('#a_url').removeClass('selected');    
                            $('#a_file').addClass('selected');    
                            $('#image_file').show();    
                            $('#image_url').hide();
                            $("#img_url").hide();
                            $('#img_file').show();
                            $('#Event_upload_method').val('file');    
                        });


                        $("#browse_file").change(function(evt){
                            var files = evt.target.files;
                            var f = files[0];

                            if(!f.type.match('image.*')) {
                                alert('File không hợp lệ. Hãy chọn 1 file ảnh khác.');
                                return false;   
                            }

                            var i = document.createElement('input');
                            if('multiple' in i){
                                var reader = new FileReader();
                                reader.readAsDataURL(f);
                                reader.onload = (function(){
                                    return function(e){
                                        $('#img_url').hide(); 
                                        $('#img_file').attr('src', e.target.result).show(); 
                                    };
                                })(f);
                                $('#img_review').show();
                            }
                        });      

                        $("#Event_image_url").bind('change keyup blur', function(evt){
                            var method = $('#Event_upload_method').val();
                            var ext = $(this).val().split('.').pop().toLowerCase(); 
                            if(method == 'url' && $.inArray(ext, [ 'jpg', 'gif', 'png' ] >= 0)){
                                $('#img_file').hide();
                                $('#img_url').attr('src', $(this).val()).show();
                                $('#img_review').show(); 

                            } 
                        });

                        <?php if($model->upload_method == 'file'):?>
                            $('#image_file').show();    
                            $('#image_url').hide(); 
                            $('#a_file').addClass('selected'); 
                            <?php else:?>
                            $('#image_url').show();    
                            $('#image_file').hide();
                            $('#a_url').addClass('selected');
                            <?php if($model->image_url):?>
                                $('#img_url').attr('src', '<?php echo $model->image_url?>').show();
                                <?php endif?> 
                        <?php endif?>
                    });
                </script>
                <div class="par control-group">
                    <label>Cover Image <span class="required">*</span> </label>
                    <div class="controls">
                        <div style="float: left;">
                            <a id="a_file" class="upload_method">Từ máy tính</a> &nbsp;|&nbsp; 
                            <a id="a_url" class="upload_method">Từ URL</a>
                            <?php echo $form->hiddenField($model,'upload_method'); ?>
                        </div> 
                        <div style="clear: both;"></div>

                        <div id="image_file">
                            <?php echo $form->fileField($model,'image_file', array('class' => 'da-custom-file', 'name' => 'browse_file')); ?>
                        </div>
                        <div id="image_url">
                            <?php echo $form->textField($model,'image_url', array('placeholder' => 'http://domain.com/path/image.jpg')); ?>
                        </div>
                        <?php echo $form->error($model,'image_file');?>
                        <?php echo $form->error($model,'upload_method');?>
                    </div>
                    <div class="controls">
                        <?php if($this->action->id == 'update'):?>
                            <img id="img_file" style="display: none; height: 60px; width: auto; margin-left: 220px;" /> 
                            <img id="img_url" style="height: 60px; width: auto; margin-left: 220px;" src="<?php echo Event::model()->getImageUrl($model->shop_id, $model->id);?>"/>
                            <!--<img style="height: 60px; width: auto;margin-left: 220px;" src="<?php // echo Event::model()->getImgUrl($model->id, $model->image.'_small.jpg');?>" />-->
                            <?php else:?> 
                            <img id="img_file" style="display: none; height: 60px; width: auto; margin-left: 220px;" /> 
                            <img id="img_url" style="display: none; height: 60px; width: auto; margin-left: 220px;" />
                            <?php endif?> 
                    </div>
                </div>

                <div class="par control-group">
                    <?php echo $form->labelEx($model,'desc', array('class' => 'control-label')); ?>
                    <div class="controls">
                        <?php echo $form->textArea($model,'desc',array('maxlength'=> 160, 'style' => 'height: 80px;width: 625px;', 'class' => 'input-large')); ?>
                        <?php echo $form->error($model,'desc', array('class' => 'help-inline error'));?>
                    </div>
                    <small class="desc">Description should be 130-160 chars <span id="desc_char_count"></span></small>
                </div>    

                <div class="par control-group">
                    <?php echo $form->labelEx($model,'content', array('class' => 'control-label')); ?>
                    <div class="controls">
                        <?php echo $form->textArea($model,'content',array('class'=> 'mce_editor', 'style' => 'height: 300px;')); ?>
                    </div>
                </div>
                <p class="stdformbutton">
                    <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save', array('class' => 'btn btn-info')); ?>
                </p>
                <?php $this->endWidget(); ?>


            </div>
        </div>

    </div>
</div>
<script>
    $(function(){
        $("#Event_start_time, #Event_end_time").timepicker({
            timeFormat: "HH:mm",
            //controlType: 'select',
            showButtonPanel: true,
            addSliderAccess: true,
            sliderAccessArgs: { touchonly: false },
            timeOnlyTitle: 'Chọn thời gian',
            timeText: 'Thời gian',
            hourText: 'Giờ',
            minuteText: 'Phút',
            closeText: 'Đóng',
            stepMinute: 10
        }); 

        var districtsDataGroupByCity = $.parseJSON('<?php echo json_encode($districtsDataGroupByCity)?>');

        $("#Event_city_id").change(function(){
            var city_id = $(this).val();

            $("#Event_district_id").html('');
            $.each(districtsDataGroupByCity[city_id], function(key, value){
                $("#Event_district_id").append('<option value="'+key+'">'+value+'</option>');
            });

        });
    })
</script>